<template>
  <div class="temperature-monitor-page">
    <!-- 概览统计 - 压缩高度 -->
    <div class="overview-cards compact">
      <el-row :gutter="8">
        <el-col :span="3">
          <div class="stat-card compact">
            <div class="stat-value">{{ overviewData.deviceCount }}</div>
            <div class="stat-label">监测设备</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="stat-card compact">
            <div class="stat-value">{{ overviewData.channelCount }}</div>
            <div class="stat-label">通道数量</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="stat-card compact">
            <div class="stat-value">{{ overviewData.meterCount }}</div>
            <div class="stat-label">米标数量</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="stat-card compact">
            <div class="stat-value">{{ overviewData.maxTemperature }}°C</div>
            <div class="stat-label">最高温度</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="stat-card compact">
            <div class="stat-value">{{ overviewData.minTemperature }}°C</div>
            <div class="stat-label">最低温度</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="stat-card compact" :class="getAlarmCardClass('temperature')" @click="handleViewTemperatureEvents" style="cursor: pointer;">
            <div class="stat-value" :class="getAlarmValueClass('temperature')">{{ overviewData.temperatureAlarmCount }}</div>
            <div class="stat-label">温度告警事件</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="stat-card compact" :class="getAlarmCardClass('fiber')" @click="handleViewFiberEvents" style="cursor: pointer;">
            <div class="stat-value" :class="getAlarmValueClass('fiber')">{{ overviewData.fiberAlarmCount }}</div>
            <div class="stat-label">断纤告警事件</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="stat-card compact" :class="getAlarmCardClass('laser')" @click="handleViewLaserEvents" style="cursor: pointer;">
            <div class="stat-value" :class="getAlarmValueClass('laser')">{{ overviewData.laserFaultCount }}</div>
            <div class="stat-label">激光器故障</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 使用 TemperatureMonitor 组件 -->
    <TemperatureMonitor layout="column" />
  </div>
</template>

<script>
import TemperatureMonitor from '@/components/TemperatureMonitor/';
import { getOverview } from '@/api/project/monitor';

export default {
  name: 'Monitor',
  components: {
    TemperatureMonitor
  },
  data() {
    return {
      overviewData: {
        deviceCount: 0,
        channelCount: 0,
        meterCount: 0,
        maxTemperature: 0,
        minTemperature: 0,
        temperatureAlarmCount: 0,
        fiberAlarmCount: 0,
        laserFaultCount: 0
      }
    };
  },
  mounted() {
    this.initOverviewData();
  },
  methods: {
    async initOverviewData() {
      await this.loadOverviewData();
    },

    async loadOverviewData() {
      try {
        const response = await getOverview();
        if (response && response.code === 200) {
          const data = response.data;

          // 更新概览数据
          this.overviewData.deviceCount = data.deviceCount || 0;
          this.overviewData.channelCount = data.channelCount || 0;
          this.overviewData.meterCount = data.meterCount || 0;
          this.overviewData.maxTemperature = data.maxTemperature || 0;
          this.overviewData.minTemperature = data.minTemperature || 0;
          this.overviewData.temperatureAlarmCount = data.temperatureAlarmCount || 0;
          this.overviewData.fiberAlarmCount = data.fiberAlarmCount || 0;
          this.overviewData.laserFaultCount = data.laserFaultCount || 0;
        } else {
          console.error('获取概览数据失败:', response?.message);
          this.$message.error('获取概览数据失败');
        }
      } catch (error) {
        console.error('加载概览数据失败:', error);
        this.$message.error('加载概览数据失败');
      }
    },

    // 获取告警卡片的样式类
    getAlarmCardClass(type) {
      const count = this.getAlarmCount(type);
      return count === 0 ? 'normal' : 'warning';
    },

    // 获取告警数值的样式类
    getAlarmValueClass(type) {
      const count = this.getAlarmCount(type);
      return count === 0 ? 'normal' : 'warning';
    },

    // 根据类型获取告警数量
    getAlarmCount(type) {
      switch (type) {
        case 'temperature':
          return this.overviewData.temperatureAlarmCount;
        case 'fiber':
          return this.overviewData.fiberAlarmCount;
        case 'laser':
          return this.overviewData.laserFaultCount;
        default:
          return 0;
      }
    },

    handleViewTemperatureEvents() {
      this.$router.push({
        path: '/project/event',
        query: {
          eventStatus: 0,
          alarmType: 3, // 温度告警
          source: 'monitor'
        }
      });
    },

    handleViewFiberEvents() {
      this.$router.push({
        path: '/project/event',
        query: {
          eventStatus: 0,
          alarmType: 1, // 断纤告警
          source: 'monitor'
        }
      });
    },

    handleViewLaserEvents() {
      this.$router.push({
        path: '/project/event',
        query: {
          eventStatus: 0,
          alarmType: 2, // 激光器故障
          source: 'monitor'
        }
      });
    }
  }
};
</script>

<style scoped>
.temperature-monitor-page {
  padding: 8px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.overview-cards {
  margin: 0 8px;
}

.stat-card {
  background: white;
  border-radius: 4px;
  padding: 8px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-card.compact {
  height: 50px;
  padding: 6px;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.stat-card.normal {
  border-left: 3px solid #52c41a;
}

.stat-card.warning {
  border-left: 3px solid #f5222d;
}

.stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 2px;
}

.stat-value.normal {
  color: #52c41a;
}

.stat-value.warning {
  color: #f5222d;
}

.stat-label {
  font-size: 12px;
  color: #666;
}
</style>
